<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 导航条下拉菜单</title>
</head>
<body>
<ul>
    <li><a class="active" href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li class="dropdown">
        <a href="#" class="dropbtn">下拉菜单</a>
        <div class="dropdown-content">
            <a href="#">链接 1</a>
            <a href="#">链接 2</a>
            <a href="#">链接 3</a>
        </div>
    </li>
</ul>

<h3>导航条插入下拉菜单</h3>
<p>鼠标移动到"下拉菜单"显示列表</p>
</body>
<style>

    ul li{
        display: inline-block;

    }
    .dropdown-content{
        display: none;
    }
    .dropdown{
        position: relative;
        display: inline-block;
    }
    .dropdown:hover .dropdown-content{
        position: absolute;
        display: block;
    }
    .dropdown-content a{
        display: block;
    }
</style>
</html>
